/* -----------------------------------------------
Blogger Template Style
Name    : Johny Classicsite
Author  : Maskolis
Url-Redesign: http://lock21.blogspot.com/
Updated by: Blogger Team
----------------------------------------------- */
/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#b1bb8e">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#444" value="#444444">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#58a" value="#000000">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#666" value="#666666">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#999" value="#666666">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#c60" value="#555555">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#ccc" value="#dcd9d9">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#999" value="#666666">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#666" value="#666666">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#999" value="#000000">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Arial, Serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal normal 200% Arial, Serif" value="normal normal 26px Georgia, Serif">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 12px Lucida Sans, Tahoma, Helvetica, FreeSans, sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif">
   <Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right">
*/
body {
	background:url(http://4.bp.blogspot.com/-CGwCv12DBG8/T8F9vBugAkI/AAAAAAAABUc/CC-GU64e9TY/s1600/body-bg.jpg);
	color:$textcolor;
	font:x-small Trebuchet MS;
	font-size:small;
	text-align:left;
	margin:0;
}

a:link {
	color:$linkcolor;
	text-decoration:none;
}

a:visited {
	color:$visitedlinkcolor;
	text-decoration:none;
}

a:hover {
	color:#009df2;
	text-decoration:none;
}

a img {
	border-width:0;
}

#header-wrapper {
	width:960px;
	margin:0 auto;
}

#header-inner {
	background-position:center;
	margin-left:auto;
	margin-right:auto;
}

#header {
	float:left;
	width:222px;
	height:90px;
	border:0 solid #dcd9d9;
	text-align:left;
	margin:0;
}

#header2 {
	float:right;
	width:728px;
	margin-right:0;
	text-align:left;
	color:#555;
}

.header2 .widget {
	margin:0 auto;
	padding:0 0 7px;
}

.header .widget {
	margin:0 auto;
	padding:0;
}

#header h1 {
	line-height:.8em;
	text-transform:none;
	letter-spacing:.1em;
	font:bold 30px Oswald;
	margin:0 auto;
	padding:0 5px .15em;
	text-shadow:1px 1px 1px #EEEFD1;
	color:#4c512e;
}

#header a:hover {
	color:#f89c21;
}

#header .description {
	max-width:100%;
	text-transform:none;
	letter-spacing:.01em;
	line-height:1.2em;
	font:14px Oswald;
	color:#595e3b;
	margin:0 auto;
	padding:0 5px 5px;
}

#header img {
	margin-startside:auto;
	margin-endside:auto;
}

#navbar-iframe {
	height:0;
	visibility:hidden;
	display:none;
}

#main-wrapper {
	background:#fff;
	width:640px;
	float:$startSide;
	word-wrap:break-word;
	overflow:hidden;
}

#sidebar-wrapper {
	background:#eee;
	width:320px;
	float:$endSide;
	word-wrap:break-word;
	overflow:hidden;
}

h2 {
	font:$headerfont;
	line-height:1.4em;
	text-transform:none;
	letter-spacing:.01em;
	color:$sidebarcolor;
	margin:.5em 0 .25em;
}

h2.date-header {
	text-transform:none;
	font:normal 12px Arial;
	color:#868c64;
	line-height:1.2em;
	margin:.1em 0;
}

.post {
	margin:.5em 0 .1em;
	padding:15px;
}

.post h3 {
	font:20px Oswald;
	line-height:1.2em;
	color:$titlecolor;
	margin:.25em 0 0;
	padding:0 0 4px;
	text-shadow:1px 1px 1px #ccc;
}

.post h3 a,
.post h3 a:visited,
.post h3 strong {
	display:block;
	text-decoration:none;
	color:$titlecolor;
	font-weight:700;
}

.post h3 strong,
.post h3 a:hover {
	color:#009df2;
}

.post-body {
	border-top:1px solid #ccc;
	color:#444;
	padding-top:6px;
	line-height:1.3em;
	margin:1.1em 0 .75em;
	font-family:arial,verdana,sans-serif;
}

.post-body blockquote {
	line-height:1.3em;
}

.post-footer {
	text-align:right;
	border-right:1px solid #ccc;
	color:#444;
	padding:0 10px;
}

.post-footer a {
	color:#444;
}

.post-footer .post-author.vcard,
.post-footer .post-timestamp,
.post-footer .post-comment-link {
	display:block;
	font-size:11px;
	border-bottom:1px solid #ccc;
	margin:5px 0 0;
}

.comment-link {
	margin-startside:.6em;
}

.post blockquote {
	margin:10px 10px 10px 20px;
	padding:10px 15px 10px 15px;
	line-height:1.6em;
	color:#333;
	background:#eee;
	border-left:20px solid #ccc;
}

.post blockquote p {
	margin:.75em 0;
}

table {
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	border:1px solid #999;
	color:#444;
	margin:10px 0;
}

table td,
table th {
	text-align:left;
	border:1px solid #999;
	padding:.4em .8em;
}

table th {
	text-transform:uppercase;
	font-weight:400;
	border:1px solid #999;
}

table td {
	border:1px solid #999;
}

table tr.even td {
	border:none;
}

.comments {
	padding:0 15px;
}

#comments h4 {
	font-size:16px;
	font-weight:400;
	margin:20px 0;
}

.cm_wrap {
	clear:both;
	margin-bottom:10px;
	float:right;
	width:100%;
}

.cm_head {
	width:60px;
	float:left;
	margin:0;
}

.cm_avatar {
	vertical-align:middle;
	border:1px solid #DDD;
	background:url(http://4.bp.blogspot.com/-POy-pvgzudE/Tz0SPxJXQnI/AAAAAAAAFUI/SlCAfDMFIhg/s1600/anonymous.jpg) center no-repeat;
	width:35px;
	height:35px;
	margin:0;
	padding:3px;
}

.cm_avatar_a {
	vertical-align:middle;
	border:1px solid #DDD;
	background:silver;
	background-position:center;
	background-repeat:no-repeat;
	width:35px;
	height:35px;
	margin:0;
	padding:3px;
}

.cm_reply a {
	display:inline-block;
	border:1px solid #C4C4C4;
	border-top-color:#E4E4E4;
	border-left-color:#E4E4E4;
	color:#424242!important;
	text-align:center;
	text-decoration:none;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	background:0;
	font:11px/18px sans-serif;
	margin:0;
	padding:1px 6px;
}

.cm_reply a:hover {
	text-decoration:none!important;
	background:#aaa;
}

.cm_entry {
	background:#fcfcfc;
	border:1px solid #E4E4E4;
	overflow:hidden;
	padding:16px;
}

.cm_arrow {
	display:block;
	width:9px;
	height:18px;
	background:url(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/s1600/comment-arrow.gif) no-repeat;
	position:absolute;
	margin-left:-25px;
}

.cm_info {
	margin-bottom:5px;
	border:thin solid #E6E6E6;
	background-color:#F4F4F4;
	padding:5px;
}

.cm_info_a {
	margin-bottom:5px;
	border:thin solid #E6E6E6;
	background-color:#e5e5e5;
	padding:5px;
}

.cm_name {
	font-size:14px;
	color:#333!important;
	text-decoration:none;
	float:left;
}

.cm_name_a {
	font:bold 13px Arial;
	color:#333!important;
	text-decoration:none;
	float:left;
}

.cm_date {
	font-size:10px;
	color:#999;
	text-decoration:none;
	float:right;
}

.cm_date_a {
	font:normal 10px Arial;
	color:#333;
	text-decoration:none;
	float:right;
	padding-top:5px;
}

.cm_pagenavi {
	font-size:10px;
	text-transform:uppercase;
	color:#666;
	text-shadow:1px 1px #FFF;
	font-weight:700;
}

.cm_pagenavi a {
	color:#666;
	text-decoration:none;
	padding:10px;
}

.cm_pagenavi span {
	color:#888;
	background:#FFF;
	border:1px solid #E0E0E0;
	padding:4px;
}

.comment-body-author {
	font-family:Arial;
	font-weight:300;
}

#blog-pager {
	position:relative;
	top:10px;
	width:auto;
	clear:both;
	font-family:Arial;
	font-weight:700;
	font-size:13px;
	margin:10px 0;
	padding:5px 10px;
}

.feed-links {
	clear:both;
	line-height:2.5em;
}

.sidebar h2 {
	background:#ccc;
	letter-spacing:-.001em;
	font:13px Oswald;
	color:#444;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #eee;
	margin:0;
	padding:6px 0 7px 10px;
	border-bottom:1px solid #ccc;
}

.sidebar {
	color:$sidebartextcolor;
	line-height:1.3em;
	border:1px solid #eee;
}

.sidebar li {
	border-bottom:1px dotted #fff;
	text-indent:0;
	line-height:1.3em;
	margin:0;
	padding:3px 0 4px;
}

.sidebar .widget {
	border:0 solid $bordercolor;
	margin:0 0 5px;
}

.sidebar .widget-content {
	margin:0 auto;
	padding:5px 10px;
}

.sidebar a:link,
.sidebar a:visited {
	font:bold 12px Arial;
	color:#555;
	text-decoration:none;
}

.main .widget {
	border-bottom:1px dotted $bordercolor;
	margin:0 0 1.5em;
	padding:0 0 1.5em;
}

.main .Blog {
	border-bottom-width:0;
}

.footer h2 {
	border-bottom:1px solid #666;
	font:14px Oswald;
	padding-bottom:5px;
	margin-bottom:10px;
	line-height:1.3em;
	text-transform:uppercase;
	letter-spacing:.01em;
	color:#333;
}

.footer {
	color:#999;
	line-height:1.3em;
	font:normal 12px Arial;
}

.footer ul {
	list-style:none;
	color:#EAE9E8;
	margin:0;
	padding:0;
}

.footer li {
	background:url(http://3.bp.blogspot.com/-osSd8Rcm04w/T6LWu5NP6aI/AAAAAAAAA9s/oOMpXCJDodA/s1600/arrow.gif) no-repeat 1px 6px;
	font:normal 12px Arial;
	color:#626262;
	text-indent:0;
	line-height:1.2em;
	margin:0;
	padding:2px 0 3px 14px;
}

.footer .widget {
	margin:0 0 8px;
	padding:6px 0;
	text-shadow:1px 1px 1px #ccc;
}

.footer .widget-content {
	padding:0 auto;
}

.profile-img {
	float:$startSide;
	margin-top:0;
	margin-endside:10px;
	margin-bottom:5px;
	margin-startside:0;
	border:1px solid $bordercolor;
	padding:4px;
}

.profile-data {
	text-transform:uppercase;
	letter-spacing:.01em;
	font:bold 13px Arial;
	color:$sidebarcolor;
	line-height:1.3em;
	margin:0;
}

.profile-datablock {
	margin:.5em 0;
}

.profile-textblock {
	line-height:1.3em;
	margin:.5em 0;
}

.profile-link {
	font:$postfooterfont;
	text-transform:none;
	letter-spacing:.01em;
}

.picfooter {
	background:#eee;
	border-top:6px solid #ddd;
	width:960px;
	margin-startside:auto;
	margin-endside:auto;
	text-align:center;
	font:$bodyfont;
}

#footer-wrapper {
	width:940px;
	text-align:left;
	font:$bodyfont;
	margin:0 auto;
	padding:10px;
}

#footer1-wrapper {
	width:300px;
	float:$startSide;
	word-wrap:break-word;
	overflow:hidden;
}

#footer2-wrapper {
	margin-left:10px;
	width:280px;
	float:left;
	word-wrap:break-word;
	overflow:hidden;
	padding:0 10px;
}

#footer3-wrapper {
	width:300px;
	float:$endSide;
	word-wrap:break-word;
	overflow:hidden;
}

.creditpic {
	background:#ccc;
	width:960px;
	margin:0 auto;
	padding:0 auto;
}

.credit {
	width:940px;
	line-height:1.6em;
	text-align:center;
	font-family:Arial;
	font-size:12px;
	color:#666;
	overflow:hidden;
	clear:both;
	margin:0 auto;
	padding:12px 0;
}

.credit a:link,
.credit a:visited {
	color:#444;
	text-decoration:none;
}

.credit a:hover {
	color:#000;
	text-decoration:none;
}

#left-col {
	width:150px;
	float:left;
	word-wrap:break-word;
	overflow:hidden;
}

#right-col {
	width:160px;
	float:right;
	word-wrap:break-word;
	overflow:hidden;
}

#outer-wrapper {
	background:#fff;
	width:960px;
	-moz-box-shadow:0 0 12px #000;
	text-align:$startSide;
	font:$bodyfont;
	margin:10px auto;
	padding:10px;
	padding-top:none;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:0 0 40px rgba(0,0,0,.20);
	-webkit-box-shadow:0 0 5px rgba(0,0,0,.20);
	-goog-ms-box-shadow:0 0 10px #222;
	box-shadow:0 0 40px rgba(0,0,0,.20);
}

.cm_entry p,
.cm_entry_a p {
	clear:both;
	border:thin solid #E6E6E6;
	background-color:#fff;
	font-size:13px;
	color:#333;
	word-wrap:break-word;
	padding:5px;
}

.cm_reply,#featured-slider .featuredPostMeta {
	padding-top:5px;
}

.sidebar ul,
#related-articles ul {
	list-style:none;
	margin:0;
	padding:0;
}

.cm_pagenavi a:hover {
	text-decoration:underline;
}

.sidebar li a:hover,
.footer li a:hover {
	color:#009df2;
}

.footer a:link,
.footer li a:visited {
	color:#444;
	text-decoration:none;
}

#under-wrapper {
	float:left;
	width:100%;
	border-bottom:1px solid #aaa;
	margin:10px 0;
	padding:5px 0 15px;
}

#tanggal_blog {
	padding-left:23px;
}

#socialcontainer {
	float:right;
	width:auto;
	height:20px;
	clear:both;
	margin-top:10px;
	*margin-top:5px;
	margin-right:1px;
	overflow:hidden;
}

#socialcontainer a {
	padding:0 0 0 0;
}

#socialcontainer a:hover {
	color:#326693;
}

.facebooklink {
	background:url(http://a.dryicons.com/images/icon_sets/socialize_icons_set/png/16x16/facebook.png) no-repeat left;
	padding-left:20px;
	margin-right:10px;
}

.rsslink {
	background:url(http://b.dryicons.com/images/icon_sets/socialize_icons_set/png/16x16/rss.png) no-repeat left;
	padding-left:20px;
	margin-right:10px;
}

.twitterlink {
	background:url(http://a.dryicons.com/images/icon_sets/socialize_icons_set/png/16x16/twitter.png) no-repeat left;
	padding-left:20px;
}

#related-articles {
	float:left;
	width:275px;
	border-right:1px solid #ddd;
	margin:5px 0 0;
	padding:0 15px 0 0;
}

#related-articles .widget {
	margin:0;
	padding:0;
}

#related-articles .widget h2,
#related-posts h2 {
	font:bold 13px Arial;
	color:#000;
	text-transform:none;
	margin:0 0 5px;
	padding:0;
}

#related-articles a {
	color:#333;
	font:12px Arial;
}

#related-articles a:hover {
	color:#9daf22;
}

#related-articles li {
	background:url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 8px;
	text-indent:0;
	line-height:1.2em;
	margin:0;
	padding:2px 0 2px 10px;
}

#banner-ads {
	float:right;
	width:300px;
	margin:5px 0;
}

#nav-wrapper {
	background:#333;
	border-top:1px solid #444;
	height:25px;
	font-family:"Tahoma",Palatino,serif;
	overflow:hidden;
}

#nav {
	margin:0 auto;
	width:960px;
	height:25px;
	padding:0;
	text-shadow:1px 1px 2px #000;
}

#nav ul {
	float:right;
	width:auto;
	height:25px;
	margin:0;
	padding:0;
	list-style-type:none;
}

#nav ul li {
	float:right;
	height:25px;
}

#nav ul li a,
#nav ul li a:visited {
	border-right:1px solid #000;
	background:#222;
	border-left:1px solid #444;
	color:#eee;
	float:right;
	height:25px;
	padding:3px 14px;
	font:11px Oswald;
	text-transform:none;
	transition:all 400ms ease-in-out;
	-webkit-transition:all 400ms ease-in-out;
	-moz-transition:all 400ms ease-in-out;
	-o-transition:all 400ms ease-in-out;
	-ms-transition:all 400ms ease-in-out;
}

#nav ul li a:hover {
	background:#000;
	color:#999;
	text-decoration:none;
}

#search {
	float:right;
	width:180px;
	height:20px;
	margin-top:-3px;
}

#search form {
	float:left;
}

#search input[type="text"] {
	background:#fff url(http://1.bp.blogspot.com/-sv3VBy8Tch0/T6UzB3zDYMI/AAAAAAAAA-Y/dVtCsOgvB_o/s1600/search_button.png) no-repeat scroll 4px center;
	float:left;
	border:1px solid #999;
	width:146px;
	margin-top:1px;
	padding:3px 15px;
	font-size:12px;
	text-align:right;
}

#search input[type="text"]:focus {
	background:#fff;
}

#search input[type="submit"] {
	display:none;
}

.newsfea {
	background:#fff;
	margin:0;
	padding:7px 10px;
	font:13px Oswald;
	color:#333;
	border-bottom:1px solid #ccc;
	text-transform:uppercase;
}

.readmorecontent {
	text-align:right;
	width:140px;
	float:right;
	margin-top:10px;
	text-shadow:1px 1px 1px #ccc;
}

.readmorecontent a {
	padding:0;
	color:#000;
	text-decoration:none;
	font-weight:bold;
}

.readmorecontent a:hover {
	color:#009df2;
	text-decoration:none;
}

.menupic {
	width:100%;
	margin:0 auto;
	padding:0 auto;
}

.menuhorisontal {
	float:right;
	background-color:#222;
	background-image:-moz-linear-gradient(top,#333 0,#222 100%);
	background-image:-ms-linear-gradient(top,#333 0,#222 100%);
	background-image:-o-linear-gradient(top,#333 0,#222 100%);
	background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#333),color-stop(100%,#222));
	background-image:-webkit-linear-gradient(top,#333 0,#222 100%);
	background-image:linear-gradient(to bottom,#333 0,#222 100%);
	border-bottom:1px solid #000;
	border-top:4px solid #111;
	height:45px;
	width:728px;
	margin:0 auto;
	padding:0 auto;
	text-shadow:1px 1px 2px #000;
}

.menuhorisontal ul {
	margin:0;
	padding-left:0;
	color:#357798;
	text-transform:capitalize;
	list-style-type:none;
	font:bold 12px Arial,Helvetica,Arial,Verdana,sans-serif;
}

.menuhorisontal li {
	display:inline;
	margin:0;
}

.menuhorisontal li a {
	border-left:1px solid #222;
	border-top:4px solid #111;
	color:#fff;
	float:right;
	font-size:12px;
	line-height:20px;
	margin-top:-4px;
	padding:3px 10px;
	text-align:right;
	transition:all 600ms ease-in-out;
	-webkit-transition:all 600ms ease-in-out;
	-moz-transition:all 600ms ease-in-out;
	-o-transition:all 600ms ease-in-out;
	-ms-transition:all 600ms ease-in-out;
}

.menuhorisontal li a span {
	color:#888;
	display:block;
	font-size:10px;
	font-weight:400;
}

.menuhorisontal li a:hover {
	background:#111;
	border-top:4px solid #009df2;
}

/*BREADCRUMBS*/
.breadcrumbs {
	padding:5px 5px 5px 0;
	margin:0 0 5px 0;
	font-size:11px;
	font-family:'Share',Arial,cursive;
	line-height:1.4em;
	border-bottom:double 3px #e6e4e3;
}

.breadhome {
	padding:0 0 0 17px;
	background:url(http://4.bp.blogspot.com/-5Rc_zI3qfC8/T27hq3l12cI/AAAAAAAAAMA/W251qMvRhGw/s1600/browse.jpg) left no-repeat;
}

.breadlabel {
	padding:0 0 0 10px;
	background:url(http://3.bp.blogspot.com/-xwda47jTAKU/T3BROasO5qI/AAAAAAAABJ0/T9V5FL8H5aU/s1600/breadlabel.jpg) left no-repeat;
}

/* Panel Comments */
a.openpanel {
	display:block;
	width:auto;
	padding:0 0;
	text-align:center;
	font-weight:bold;
	line-height:32px;
	background-color:#000;
	color:white;
	text-decoration:none;
	margin:0 0;
	-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
	-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);
	box-shadow:0 1px 1px rgba(0,0,0,0.2);
	position:relative;
}

a.openpanel em {
	width:0;
	height:0;
	display:block;
	position:absolute;
	top:15px;
	right:15px;
	border:6px solid transparent;
	border-top-color:white;
}

a.openpanel.active {
	background-color:#303030;
}

a.openpanel.active em {
	top:6px;
	border-color:transparent transparent white transparent;
}

div.paneline {
	height:0;
	border-bottom:4px inset #1a1a1ab;
}

div.hompiPanel {
	padding:10px 20px 20px;
	-webkit-box-shadow:inset 0 1px 7px rgba(0,0,0,0.2);
	-moz-box-shadow:inset 0 1px 7px rgba(0,0,0,0.2);
	box-shadow:inset 0 1px 7px rgba(0,0,0,0.2);
	margin:0 0 !important;
}

#error-page {
	text-align:center;
	background:url(http://3.bp.blogspot.com/-WAtGZTUxgGs/T9_3qhRltfI/AAAAAAAAACc/GUxFlLB7_JI/s1600/whitey.png) #e1e1e1 repeat;
	position:fixed !important;
	position:absolute; /* IE6 Fallback */
top:0;
	right:0;
	bottom:0;
	left:0;
	padding-top:100px;
	z-index:99999;
}

#ULtoTop {
	text-align:center;
	position:fixed;
	bottom:18px;
	right:22px;
	cursor:pointer;
	display:none;
	color:#000;
	font-family:verdana;
	font-size:11px;
}

